<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>流程列表</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="../../assets/js/jquery-2.0.3.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/hammer.min.js"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../assets/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="../../assets/js/jquery.ztree.all.min.js"></script>
    <script src="../../assets/js/dialog.js"></script>
    <script src="../../assets/js/common.js" type="text/javascript"></script>
    <script src="../../assets/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../assets/js/myUrl.js" type="text/javascript"></script>
    <script src="activiti.js" type="text/javascript"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../assets/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="../../assets/css/dialog.css" rel="stylesheet" />
    <link href="../../assets/css/zTreeStyle.css" rel="stylesheet" />
    <link href="../../assets/css/common.css" rel="stylesheet" />
</head>
<style type="text/css">
    a,a:hover,a:visited,a:link{
        cursor: pointer;
        text-decoration: none;
    }
</style>
<script type="text/javascript">


    $(function () {
        //调用函数，初始化表格
        initTable();

        //新增
        $("#btn_add").on("click",function () {
            addModel();
        })

        $("#btn_edit").on("click", function () {
            editModel();
        });
        
    })
    
    function addModel() {
        clearInput();
        var elem1 = document.getElementById('addModelForm');
        dialog({
            title: "新增模型",
            content: elem1,
            width: '40em',
            okValue: "确定",
            ok: function () {
                if(saveCheckDataInfo()){
                    var dataValue = {};
                    dataValue["name"] = $("#name").val();
                    dataValue["revision"] = $("#revision").val();
                    dataValue["key"] = $("#key").val();
                    dataValue["description"] = $("#description").val();
                    var b = myAjaxJSON(dataValue, local_url.activiti_model_new,  "POST");
                    if(b.code=="200"){
                        console.info("========id:"+b.data);
                        jump(b.data);
                    }
                    return b;
                }else {
                    return false;
                }
            },
            cancelValue: '取消',
            cancel: function () {}
        }).showModal();
    }

    function editModel() {
        var valueInfo = $('#mytab').bootstrapTable('getSelections');
        if(valueInfo!=null&&valueInfo!=""&&valueInfo.length>0) {
            jump(valueInfo[0].id);
        }else {
            promptDail('请选择一条数据!');
        }
    }

    /**部署流程*/
    function deploy(id) {
        var options = {"id":id};
        dialog({
            title: "部署流程",
            content: "确认部署流程",
            width: '100px',
            okValue: "确认部署流程",
            ok : function () {
                var result =  myAjax(options, local_url.activiti_model_deploy, "PUT");
                if(result.code=="200"){
                    promptDail("部署成功！");
                }else if(result.code!="5000") {
                    promptDail("部署失败！");
                }

            },
            onremove: function () {
                initTable();
            },
            cancelValue: '取消',
            cancel: function () {}
        }).showModal();
    }
    
    function jump(id) {
        window.location.href = "/html/activiti/modeler.html?modelId="+id+"&btnPurid="+btnPurid;
    }
    
    function initTable() {
        commonInitTable(local_url.activiti_model_list, "mytab", null)
    }

    function clearInput(){
        $("#name").val("");
        $("#revision").val("");
        $("#key").val("");
        $("#description").val("");
    }

    function saveCheckDataInfo() {
        var b1 = checkValue("name");
        var b2 = checkValue("revision");
        var b3 = checkValue("key");
        var b4 = checkValue("description");
        if(b1&&b2&&b3&&b4){
            return true;
        }

        return false;
    }
</script>
<body style="padding:5px;">
<div class="panel panel-default" >
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <form id="searchForm">
        <label class="col-sm-2 control-label" style="width: 10%;text-align: right; margin-top:5px">模型名称：</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="names" id="names"/>
        </div>
        <div class="col-sm-1">
            <button class="btn btn-primary" id="search_btn" onclick="initTable();return false;">查询</button>
        </div>
        </form>
    </div>
</div>
<div id="toolbar" class="btn-group pull-right"  style="margin: 0px 0px 5px 0px;">
    <button id="btn_add" type="button" class="btn btn-default btn-purview">
        <span class="glyphicon glyphicon-plus" ></span>新增
    </button>
    <button id="btn_edit" type="button" class="btn btn-default btn-purview" >
        <span class="glyphicon glyphicon-pencil"  ></span>修改
    </button>
</div>
<table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
       data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="10"
       data-page-list="[10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
       data-pagination-loop="false" data-click-to-select="true" >
    <colgroup>
        <col style="width: 5%">
        <col style="width: 10%">
        <col style="width: 20%">
        <col style="width: 15%">
        <col style="width: 20%">
        <col style="width: 10%">
        <col style="width: 10%">
    </colgroup>
    <thead>
        <tr >
            <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
            <th data-align="center" data-valign="middle" data-field="id">模型id</th>
            <th data-align="center" data-valign="middle" data-field="name">模型名称</th>
            <th data-align="center" data-valign="middle" data-field="version">版本</th>
            <th data-align="center" data-valign="middle" data-field="createTime">创建时间</th>
            <th data-align="center" data-valign="middle" data-field="deploymentId">部署id</th>
            <th data-align="center" data-valign="middle" data-formatter="initEdit">部署id</th>
        </tr>
    </thead>
</table>

<div id="addModelForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;height: 260px;overflow-x: hidden;overflow-y: auto;">
        <form class="form-horizontal" id="nodeDataForm" role="form">

            <div class="form-group">
                <label class="col-sm-3 control-label">模型名称:<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="name" name="name" onBlur="onBlurValue(this)"
                           placeholder="任务名称"/>
                    <span class="help-block" style="color: red; display: none;">任务名称</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">版本号:<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="revision"  name="revision" onBlur="onBlurValue(this)"
                           onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"
                           placeholder="版本号"/>
                    <span class="help-block" style="color: red; display: none;">版本号</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">模型分类:<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="key" name="key"
                           onBlur="onBlurValue(this)" placeholder="模型分类"/>
                    <span class="help-block" style="color: red; display: none;">模型分类</span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">描述:<span style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" style="width: 80%" id="description" name="description"
                           placeholder="描述" onBlur="onBlurValue(this)"/>
                    <span class="help-block" style="color: red; display: none;">执行任务类名</span>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    function initEdit(val, row, index) {
        var html = "";
        html += "<a href=\'javascript:void(0)\' onclick=deploy(\'"+row.id+"\')>【部署】</a>";
        return html;
    }

</script>
</html>